<template>
	<view class="content">
		<web-view src="https://static-914faa21-0020-4594-a1cc-bda48b1bcdaa.bspapp.com"></web-view>
		<!-- <view class="toubugud" :style="{background: albei}">
			<view class="shijian">{{daydata}}</view>
			<view class="xxzx">
				<image class="uimg" src="../../static/kefu.png" @click="gokefudh"></image>
				<view @click="gogonggxx">
					<view class="tishi"></view>
					<image class="uimg" src="../../static/xiaoxi.png"></image>
				</view>
			</view>
		</view>
		<swiper class="top-box" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="400" :circular="true">
			<swiper-item v-for="item in lunbimg">
				<image class="img"  :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="daohang">
			<view class="zdhuanh">
				<view class="xxruk" @click="gopaidui">
					<image class="rukimg" src="../../static/paidu.png"></image>
					<view>排队</view>
				</view>
				<view class="xxruk" @click="gonianka">
					<image class="rukimg" src="../../static/nianka.png"></image>
					<view>年卡</view>
				</view>
				<view class="xxruk" @click="gomendian">
					<image class="rukimg" src="../../static/mendian.png"></image>
					<view>门店</view>
				</view>
				<view class="xxruk" @click="goshangceng">
					<image class="rukimg" src="../../static/sangcheng.png"></image>
					<view>商城</view>
				</view>
			</view>
		</view>
		<view class="shejistuanj">
			<view class="zhuoy">
				<view class="zhuti">附近门店</view>
				<view class="quabbq" @click="gomendian">全部 ></view>
			</view>
		</view>
		<scroll-view class="xingxtq"  scroll-x="true">
			<view class="gundong" :style="{'width':kuan}">
				<view class="shejisk" v-for="item in faxins" @click="gomendxqin">
					<image class="fximg" :src="item.udix" mode="aspectFill"></image>
					<view class="dianm">{{item.xinm}}</view>
					<view class="fxname">{{item.ziche}}人排队</view>
				</view>
			</view>
		</scroll-view>
		<view class="shejistuanj">
			<view class="zhuoy">
				<view class="zhuti">热销商品</view>

			</view>
		</view>
		<view class="duanhang">
			<view class="kapian" v-for="or in shangpin" @click="gospxiangq">
				<image class="shpimg" :src="or.spimg" mode="aspectFill"></image>
				<view class="spname">{{or.spname}}</view>
				<view class="hengg">
					<view class="jiag">
						<view class="qian">￥</view>
						<view class="jiage">{{or.jiage}}</view>
					</view>
					<view class="gouwuc">
						<image class="gwimg" src="../../static/gouwud.png"></image>
					</view>
				</view>
			</view>
			<view class="chakgd">查看更多</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				albei:'',
				lunbimg: [
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcos2.solepic.com%2FUploadImg%2Fimage%2F20200202%2F20200202134952_5047.jpg&refer=http%3A%2F%2Fcos2.solepic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643344668&t=b4bfe118e1c6348b551dcf7a335615e3',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.meituan.net%2Fdpdeal%2Fd023f4618baf3d73bc7e6027aad8b7ab54442.jpg&refer=http%3A%2F%2Fp0.meituan.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643344766&t=17eccc451091e4f76cc9c4a5c298eb79'
				],
				daydata:'',
				kuan:'1100rpx',
				faxins:[{
					udix:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F413%2Fw640h573%2F20190214%2FO7QJ-hswimzz2200599.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643351134&t=06d9acc4b8a3c4ff8812deec9141e197',
					xinm:'西大东门店',
					ziche:1,
				},{
					udix:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0421%2F71341789j00q9570u000xd000hs00hsp.jpg&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643359415&t=08c27f2a263da4c268a2084f7b71628c',
					xinm:'青秀万达店',
					ziche:3
				},{
					udix:'https://img1.baidu.com/it/u=2848178812,2645504148&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
					xinm:'农院路店',
					ziche:2
				},{
					udix:'https://img1.baidu.com/it/u=2910686003,4264925804&fm=26&fmt=auto',
					xinm:'万象城店',
					ziche:5
				},{
					udix:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13771542451%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643359851&t=6a9de461ce8494b9397ed30e364669b0',
					xinm:'百盛步行街店',
					ziche:3
				}],
				shangpin:[{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0411%2F05485b5ej00qrehbk0018c000h800pac.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643360663&t=5562ae8e7805eae9f48d80fef2295a30',
					spname:'沙宣高级护理套装',
					jiage:1288
				},{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0906%252F24cd4125j00qyzq0v0023c000hs00u5g.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643362103&t=d965cd5d5473f177cd9637e115e2a8b9',
					spname:'花蝶护发素1000ml家庭套装',
					jiage:388
				},{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F16%2F20210716000427_48d8d.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643362363&t=e80859feef53a2fc5996cd591d870e14',
					spname:'飘柔护法精华素200ml',
					jiage:988
				},{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqqpublic.qpic.cn%2Fqq_public%2F0%2F0-2811118731-4D091433FAD80F042B8A707D1E6D894A%2F0%3Ffmt%3Djpg%26size%3D76%26h%3D1349%26w%3D900%26ppv%3D1.jpg&refer=http%3A%2F%2Fqqpublic.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643362469&t=4e19b1e9328d04acdae9b6c08a2e6c31',
					spname:'飘柔护法精华素200ml',
					jiage:1268
				},{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcos2.solepic.com%2FUploadImg%2Fimage%2F20200202%2F20200202134952_5047.jpg&refer=http%3A%2F%2Fcos2.solepic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643362520&t=daeabe4719baae931a8d8ed8b9ea7147',
					spname:'飘柔护法精华素200ml',
					jiage:1268
				},{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.juimg.com%2Ftuku%2Fyulantu%2F140110%2F328704-14011019344655.jpg&refer=http%3A%2F%2Fimg.juimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643362520&t=260f7bde69a3d34a742e47946644bae3',
					spname:'飘柔护法精华素200ml',
					jiage:1268
				},{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.juimg.com%2Ftuku%2Fyulantu%2F130717%2F325734-130GG9261788.jpg&refer=http%3A%2F%2Fwww.juimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643362520&t=5770d08ee128cc1a5a234872343dc2b2',
					spname:'飘柔护法精华素200ml',
					jiage:1268
				},{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.ouquan.cn%2Fd%2Ffile%2Fmyzx%2Fmydt%2F2015-12-02%2F2716874367e3673c723d416f832e6134.jpg&refer=http%3A%2F%2Fwww.ouquan.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643362520&t=28a37e8dda5198791b68a7c77039d7a8',
					spname:'飘柔护法精华素200ml',
					jiage:1268
				}],
			}
		},
		onLoad() {
			this.getdata();
		},
		// 监控屏幕滚动
		onPageScroll(e) {
			console.log(e.scrollTop);
			var zuob = 1;
			if(e.scrollTop>=100){
				zuob = 100;
			}else{
				zuob = e.scrollTop;
			}
			this.albei = 'rgba(255,255,255, ' + (zuob*0.01) + ')';
		},
		methods: {
			// 获取日期
			getdata(){
				var date1 = new Date();
				var year = date1.getFullYear();
				var month = date1.getMonth() + 1;
				var strDate = date1.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + '-' + month + '-' + strDate;
				let date = new Date(currentdate.replace(/-/g,'/')); //Wed Jan 02 2019 00:00:00 GMT+0800 (China Standard Time)
				let chinaDate = date.toDateString(); //"Tue, 01 Jan 2019 16:00:00 GMT"
				let chinaDateArray = chinaDate.split(' '); //["Wed", "Jan", "02", "2019"]
				
				let displayDate = `${chinaDateArray[1]} ${chinaDateArray[2]}, ${chinaDateArray[3]}`; //"Jan 02, 2019"
				this.daydata = displayDate;
				console.log(displayDate)
			},
			
			// 拔打客服电话
			gokefudh(){
				uni.makePhoneCall({
					phoneNumber:'15978194868'
				})
			},
			// 消息
			gogonggxx(){
				uni.navigateTo({
					url:'../xiaoxtongz/xiaoxtongz'
				})
			},
			// 排队
			gopaidui(){
				uni.navigateTo({
					url:'../paidui/paidui'
				})
			},
			// 年卡
			gonianka(){
				uni.navigateTo({
					url:'../nianka/nianka'
				})
			},
			// 门店
			gomendian(){
				uni.navigateTo({
					url:'../mendian/mendian'
				})
			},
			gomendxqin(){
				uni.navigateTo({
					url:'../mdxisngq/mdxisngq'
				})
			},
			// 商城
			goshangceng(){
				uni.navigateTo({
					url:'../shangceng/shangceng'
				})
			},
			gospxiangq(){
				uni.navigateTo({
					url:'../spxiangqing/spxiangqing'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		.toubugud{
			position: fixed;
			width: 750rpx;
			padding: 60rpx 0 10rpx 0 ;
			top: 0;
			z-index: 999;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.shijian{
				font-size: 35rpx;
				font-weight: bold;
				color: #626262;
				margin-left: 30rpx;
			}
			.xxzx{
				width: 140rpx;
				height: 80rpx;
				border-radius: 40rpx;
				margin-right: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				background-color: rgba($color: #000000, $alpha: 0.8);
				.tishi{
					width: 20rpx;
					height: 20rpx;
					background-color: #ff0000;
					border-radius: 10rpx;
					position: absolute;
					z-index: 11;
					margin-left: 35rpx;
				}
				.uimg{
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
		// 轮播图
		.top-box{
			width: 750rpx;
			height: 800rpx;
			/deep/ .uni-swiper-dots {
				// 指示点整个区域的位置
				bottom: 110rpx;
				left: 60rpx;
			}
	
			/deep/ .uni-swiper-dot {
				// 指示点元素默认样式
				width: 9upx !important;
				height: 9upx !important;
				background: #C0C0C0 !important;
			}
	
			/deep/ .uni-swiper-dot-active {
				// 指示点元素激活（当前选中）状态样式
				width: 32upx !important;
				height: 8upx !important;
				background: #ff007f !important;
				border-radius: 4rpx;
			}
			
			.img{
				width: 750rpx;
				height: 800rpx;
			}
		}
		// 菜单
		.daohang{
			width: 750rpx;
			padding-top: 50rpx;
			border-radius: 30rpx 30rpx 0 0;
			margin-top: -110rpx;
			z-index: 99;
			// background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			overflow: hidden;
			position: relative;
			.zdhuanh{
				display: flex;
				width: 690rpx;
				justify-content: space-between;
				.xxruk{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 150rpx;
					padding: 10rpx 0;
					font-size: 28rpx;
					color: #333333;
					.rukimg{
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
		}
		.daohang::after {  
			content: '';  
			width: 150%;  
			height: 100px;  
			position: absolute;  
			left: -35%;  
			top: 10;  
			z-index: -1;  
			border-radius: 50% 50% 0 0 ;  
			background: #ffffff;
			box-shadow: 10rpx 0rpx 20rpx 5rpx #000000;
		}
		
		
		// 设计师推荐
		.shejistuanj{
			margin: 20rpx;
			color: #333333;
			font-size: 28rpx;
			.zhuoy{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.zhuti{
					font-size: 35rpx;
					color: #4a4a4a;
					font-weight: bold;
				}
				.quabbq{
					background: #cecece;
					padding: 5rpx 20rpx;
					border-radius: 30rpx;
					color: #545454;
				}
			}
			
		}
		.xingxtq{
			width: 750rpx;
			.gundong{
				display: flex;
				padding-right: 20rpx;
				.shejisk{
					width: 160rpx;
					// height: 300rpx;
					border-radius: 20rpx;
					background-color: #f8f8f8;
					margin-left: 20rpx;
					// text-align: center;
					font-size: 30rpx;
					padding-bottom: 30rpx;
					.fximg{
						width: 160rpx;
						height: 200rpx;
						border-radius: 20rpx 20rpx 0 0;
					}
					.dianm{
						font-size: 28rpx;
						font-weight: bold;
						display: block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow:ellipsis;
					}
					.fxname{
						font-size: 25rpx;
						color: #808080;
						margin-top: 5rpx;
					}
				}
			}
			
			
		}
		.duanhang{
			width: 710rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			.kapian{
				width: 345rpx;
				height: 500rpx;
				background: #f8f8f8;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				.shpimg{
					width: 345rpx;
					height: 360rpx;
					border-radius: 20rpx 20rpx 0 0;
				}
				.spname{
					padding: 5rpx 10rpx;
					display: block;
					font-size:28rpx;
					color:#626262;
					overflow: hidden;
					white-space: nowrap;
					text-overflow:ellipsis;
				}
				.hengg{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 5rpx 10rpx 20rpx 10rpx;
					.jiag{
						display: flex;
						align-items: flex-end;
						.qian{
							font-size: 25rpx;
						}
						.jiage{
							font-weight: bold;
						}
					}
					.gouwuc{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 50rpx;
						height: 50rpx;
						background: #323232;
						border-radius: 25rpx;
						.gwimg{
							width: 28rpx;
							height: 28rpx;
						}
					}
				}
			}
			.chakgd{
				width: 710rpx;
				height: 60rpx;
				font-size: 26rpx;
				color: #808080;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;
				background: #f8f8f8;
				margin-bottom: 50rpx;
			}
		}
	}
	
</style>
